import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions, TouchableOpacity, PixelRatio, Image } from "react-native";
import { style } from '../../../../../theme/style';
import { offerStyle } from './offerStyle';
import ProductSelect from '../../../../product/modals/ProductSelect';


const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;

export class GoodsSelectCpt extends Component {

	constructor(props) {
		super(props);
		let { data } = props || {};

		this.state = {
			goodsModal: false
		}

	}

	//商品确认
	_confirmPress = (dataSend) => {

		if (!dataSend.length) return;

		let { data, event } = this.props || {};
		let { goodsIndex, goodsData } = data || {};
		let { changeGoods } = event || {};

		let { goodsItem } = dataSend[0] || {};


		console.log('dataSend', dataSend, goodsItem)

		goodsData[goodsIndex].goodsName = goodsItem.goodsName || goodsItem.goodsCateName;
		goodsData[goodsIndex].goodsId = goodsItem.ubmpGoodsId;
		goodsData[goodsIndex].goodsSkuId = goodsItem.goodsId;
		goodsData[goodsIndex].goodsCateId = goodsItem.goodsCateId;
		this.setState({
			goodsData: goodsData,
			goodsModal: false
		}, () => {
			console.log('goodsData-商品回调', goodsData, this.props);
			changeGoods && changeGoods(goodsData, goodsIndex);
		})
	}

	//商品取消
	_cancelPress = () => {
		this.setState({
			goodsModal: false
		})
	}

	// 打开商品
	_openModalFn = () => {
		let { notAdd } = this.props || {};
		if (notAdd) return;
		this.setState({
			goodsModal: true
		})
	}

	render() {
		let { data, event, notAdd } = this.props || {};
		let { removeText, goodsIndex, goodsData, salesRuleId } = data || {};
		let { removeGoods } = event || {};
		let { goodsModal } = this.state || {};
		return (
			<View>
				<TouchableOpacity style={[styles.goodsItem, notAdd ? offerStyle.notAdd : null]} onPress={this._openModalFn}>
					<View style={offerStyle.goodsTitleBox}>
						<Text style={[offerStyle.radioRequire, offerStyle.required]}>*</Text>
						<Text style={[offerStyle.fontSize, styles.goodsName, goodsData[goodsIndex].goodsName ? offerStyle.fontBold : null]}>{goodsData[goodsIndex].goodsName || "商品名称"}</Text>
					</View>
					<View style={styles.goodsBody}>
						{/* <AntDesignIcon name='right' style={offerStyle.fontSize} /> */}
						<Image source={require('../../../../../imgs/arrow.png')} style={[offerStyle.selectImg]} />
						{removeText && goodsData.length > 1 ? <Text onPress={() => { removeGoods && removeGoods(goodsIndex) }} style={[offerStyle.fontSize, styles.goodsRemove]}>{removeText}</Text> : null}
					</View>
				</TouchableOpacity>
				{!notAdd ?
					<ProductSelect
						confirmPress={this._confirmPress}
						cancelPress={this._cancelPress}
						sendData={{
							salesRuleId
						}}
						salesRuleId={true}
						//mainCheckData={ProductSend}
						modalVisible={goodsModal}
						//tCode={this.tCode}
						isGP={true}
					/>
					: null
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	goodsBox: {
		backgroundColor: style.color.white,
		borderRadius: 5 * scale,
		marginBottom: 25 * scale
	},
	goodsItem: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderBottomColor: '#D8D8D8',
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		//paddingHorizontal: 10 * scale,
		paddingLeft: 10 * scale,
		height: 38 * scale
	},
	goodsName: {
		width: 150 * scale
	},
	goodsRemove: {
		color: '#E02020',
		height: 38 * scale,
		lineHeight: 38 * scale,
		paddingRight: 15 * scale,
		paddingLeft: 15 * scale,
	},
	goodsBody: {
		flexDirection: 'row',
		justifyContent: 'flex-end',
		alignItems: 'center',
		width: 150 * scale,
		height: 38 * scale
	},
})